﻿import QtQuick 2.0
import QtGraphicalEffects 1.12

Rectangle {
    height: 47
    width: 193
    color: '#525661'
    radius: 2.75
    property bool opened
    property int index
    signal state()
    Component.onCompleted:{
        if(opened){
                    leftx.start()
                    text2.color='#33000000'
                    text1.color='#FFFFFF'
                    slipRec.color='#2D94FD'
                    state()
       }
       else{
            rightx.start()
            text2.color='#000000'
            text1.color='#33000000'
            slipRec.color='#B7FFFFFF'
            state()
        }
    }
    onOpenedChanged: {
        if(opened){
                    leftx.start()
                    text2.color='#33000000'
                    text1.color='#FFFFFF'
                    slipRec.color='#2D94FD'
            state()
       }
       else{
            rightx.start()
            text2.color='#000000'
            text1.color='#33000000'
            slipRec.color='#B7FFFFFF'
            state()
        }
    }
    Rectangle {
        id:slipRec
        z:1
        width: 92.79
        height: 41.25
        x:4
        y:3
        color: "#2D94FD"
        radius: 2.75
    }

    Rectangle {
        height: parent.height
        width: parent.width/2
        anchors.left:parent.left
        color: "#00525661"
        id:leftRec
        z:2
        Text {
            id: text1
            text: '开'
            font.pointSize: 19.25
            font.family: "PingFang HK"
            color: '#FFFFFF'
            anchors.centerIn: leftRec
        }
    }
    NumberAnimation {
        id:leftx
        target: slipRec
        property: "x"
        to:4
        duration: 200
        easing.type: Easing.InOutQuad
    }
    NumberAnimation {
        id:rightx
        target: slipRec
        property: "x"
        to:97
        duration: 200
        easing.type: Easing.InOutQuad
    }
    Rectangle {
        id:rightRec
        height: parent.height
        width: parent.width/2
        anchors.right:parent.right
        color: "#00525661"
        z:2
        Text {
            id: text2
            text: '关'
            font.pointSize: 19.25
            font.family: "PingFang HK"
            anchors.centerIn: rightRec
            color: '#33000000'
        }
//        MouseArea {
//                id:rightMouse
//                anchors.fill: parent
//                onClicked: {
//                    opened=false
//                }
//        }

    }
    MouseArea {
            anchors.fill: parent
            onClicked: {
                opened=!opened
            }
        }
}
